<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>后台管理 —— 机房管理</title>
    <link rel="shortcut icon" href="../static/img/images/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="../static/css/style/style.css">
    <link rel="stylesheet" type="text/css" href="../static/css/style/computerroom.css">
    <link rel="stylesheet" type="text/css" href="../static/js/layui/css/layui.css">
    <link rel="stylesheet" type="text/css" href="../static/css/ztree/zTreeStyle.css">
</head>

<body>
    <div class="app">
        <header>
            <div class="header-border">
            </div>
            <div class="header-content">
                <div id="header-date"></div>
                <div id="header-week"></div>
                <div id="header-menu"><div>首页</div></div>
                <div id="header-room" class="header-nav">
                    <div>机房选择</div>
                </div>
                <div id="orgname">
                    <img src="../static/img/images/icon2.png" alt="">
                    <span></span></div>
                <div id="manage">
                    <img src="../static/img/images/icon1.png" alt="">
                    后台管理</div>
                <div id="logout">注销</div>
                <div class="room-choose">
                </div>
            </div>
        </header>
        <nav>
            <div class="nav-item" id="orgmanage">组织管理</div>
            <div class="nav-item" id="user">用户管理</div>
            <div class="nav-item" id="computerroom">机房管理</div>
            <div class="nav-item" id="nodeinfo">设备管理</div>
        </nav>
        <div class="main">
            <div class="main-left">
                <div class="main-left-tit">机房管理 <span>//////</span></div>
                <div class="main-left-con">
                    <div class="main-left-tree">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
            </div>
            <div class="main-right">
                <div class="main-left-tit">机房管理 <span>//////</span> </div>
                <div class="main-right-con">
                      <div class="branch layui-form" >
                        <div class="body-top">
                            <span>机房名称</span>
                            <input id="computername" type="text">
                        </div>
                        <div class="body-top">
                            <span>所属街道</span>
                            <input id="areaname" type="text">
                        </div>
                        <div class="body-top">
                            <span>创建时间</span>
                            <input type="text" id="date-input" style="width: 1.8rem;">
                        </div>
                        <div class="body-button">
                            <button class="layui-atn" lay-submit lay-filter="formDemoa">
                                            <img src="../static/img/images/search.png">
                                            查询
                                        </button>
                        </div>
                        <div class="body-button">
                            <button class="layui-btn" lay-submit lay-filter="formDemob">
                                            <img src="../static/img/images/add.png">
                                            新增
                                        </button>
                        </div>
                    </div>
                    <div class="order-body-bottom">
                            <div class="body-content-table">
                                <table id="body-content-table"></table>
                            </div>
                    </div>

                </div>
            </div>
            <div class="add-room msg-from-to-mid">
                <div class="main-tit">
                    <img src="../static/img/images/icon44.png">
                    <label ></label>
                    <div onciclk="$('.add-room').hide()">
                        ✕ 关闭
                    </div>
                </div>
                <form class="layui-form" action="" lay-filter="formTest" >
                    <div class="add-room-body">
                        <ul>
                         <li class="add-room-body-item">
                                <div>机房名称：</div>
                                <input name="name" id="name" type="text" required lay-verify="required" class="layui-input">
                            </li>
                            <li class="add-room-body-item">
                                <div>类型：</div>
                                <select name="type" id="room-type" required lay-verify="required">
                                    <option value=""></option>
                                    <option value="1">机房</option>
                                    <option value="2">管井</option>
                                </select>
                            </li>
                            <li class="add-room-body-item">
                                <div>机房负责人：</div>
                                <input name="person" id="person" type="text" required lay-verify="required" class="layui-input">
                            </li>
                            <li class="add-room-body-item">
                                <div>负责人电话：</div>
                                <input name="phone" id="phone" type="text" required lay-verify="required" class="layui-input">
                            </li>
                            <li class="add-room-body-item">
                                <div>经纬度：</div>
                                <input id="map-input" name="" type="text" required lay-verify="required" class="layui-input">
                            </li>
                            <li class="add-room-body-item" style="display: none;">
                                <div>经纬度：</div>
                                <input name="longitude" id="longitude" type="text" class="layui-input">
                            </li>
                            <li class="add-room-body-item" style="display: none;">
                                <div>经纬度：</div>
                                <input name="latitude" id="latitude" type="text" class="layui-input">
                            </li>
                            <li class="add-room-body-item">
                                <div>详细地址：</div>
                                <input name="address" id="address" type="text" required lay-verify="required" class="layui-input">
                            </li>
                            <li class="add-room-body-item">
                                <div>机柜总数：</div>
                                <input name="racknum" id="racknum" type="text" required lay-verify="required" class="layui-input">
                            </li>
                            <li class="add-room-body-item">
                                <div>选择组织：</div>
                                <input  name="org" id="org" type="text" required lay-verify="required" class="layui-input" value="选择组织">
                            </li>
                            <div class="main-left-treee" style="display: none">
                        <ul id="treeDemod" class="ztree"></ul>
                    </div>
                        </ul>
                        <div class="add-room-submit">
                            <button type="reset" id="reset">重置</button>
                           <button id="formDemoSubmit" lay-submit lay-filter="formDemo">提交</button>
                        </div>
                    </div>
                    <div class="map-box" style="display: none;">
                        <div id="map"></div>
                        <div id="pickerBox">
                            <input id="pickerInput" placeholder="输入关键字选取地点" />
                            <div id="poiInfo"></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        </div>
    </div>
    <script type="text/javascript" src="../static/js/common/jquery.min.js"></script>
    <script type="text/javascript" src="../static/js/biz/app.js"></script>
    <script type="text/javascript" src="../static/js/layui/layui.all.js"></script>
    <script type="text/javascript" src="../static/js/biz/computerroom.js"></script>
    <script type="text/javascript" src="../static/js/ztree/jquery.ztree.all.min.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=6125416e635535d089ac5150ae8ebe04&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.Driving"></script>
     <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
</body>

</html>